import { useUserStore } from '@/stores'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus' // 只有在vue中，是按需导入

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  baseURL,
  timeout: 100000
})
// 请求拦截器，请求拦截器在请求发送之前执行，可以用于以下目的：
instance.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)
//  响应拦截器，响应拦截器在响应接收之后执行，可以用于以下目的：
instance.interceptors.response.use(
  (res) => {
    if (res.data.code === 0) {
      //  返回结果，后续接着执行
      return res
    }
    ElMessage({ message: res.data.message || '服务异常', type: 'error' })
    return Promise.reject(res.data)
  },
  (err) => {
    ElMessage({
      message: err.response?.data.message || '服务异常',
      type: 'error'
    })
    console.log(err)
    if (err.response?.status === 401) {
      router.push('/login')
    }
    // 返回错误，后续不会执行
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

//  err.response.data 代表的是 axios 请求在发生错误时，服务器返回的响应数据。
// 具体来说，当 axios 请求失败时，err 对象会包含一个 response 属性，该属性包含了服务器的响应信息，
// 而 response.data 则是服务器返回的实际数据。

//例如，如果服务器返回一个错误响应 { "code": 401, "message": "Unauthorized" }，
// 那么 err.response.data 就会是这个对象 { "code": 401, "message": "Unauthorized" }。
